<template>
    <div class="case-detail">
        <!-- <div class="bg"></div> -->
        <div class="breadcrumb-list">
            <div class="breadcrumb-item">
                <span class="back">返回</span>
                <nuxt-link href="/">云空间</nuxt-link>
                <el-icon size="16" color="#666">
                    <DArrowRight />
                </el-icon>
            </div>
        </div>

        <DefaultP :detail="detail" @onCaseView="onCaseView('url')" @onCaseExperience="onCaseExperience"
            v-if="detail.style == 0" />

        <ExaminationSystemP @onCaseView="onCaseView('url')" @onCaseExperience="onCaseExperience" :detail="detail"
            v-else-if="detail.style == 1" />

        <!-- 推荐案例 -->
        <div class="recommend-title">推荐案例</div>

        <div class="recommend-list">
            <CaseItemP v-for="item in recommend" :item="item" :key="item.id" />
        </div>
    </div>

    <!-- 多级-2层 -->
    <LazyDialogCaseListP ref="CaseListDialogRef" :dataList="dataCaseList" />

    <LazyDialogCaseContactP ref="CaseContactDialogRef" />
    <LazyDialogCaseMenusP ref="CaseMenusDialogRef" />

    <LoginP v-if="isLoginTipsDialogVisible" :is-back="true" :is-close="false" :is-blur="true" @close="onLoginClose" />
</template>

<script setup>
import { useContent } from ".";
import { useRouter } from "vue-router";
import { DArrowRight } from "@element-plus/icons-vue";
import DefaultP from "./components/Default/P";
import ExaminationSystemP from "./components/ExaminationSystem/P";


const {
    detail,
    recommend,
    dataCaseList,
    CaseListDialogRef,
    CaseContactDialogRef,
    CaseMenusDialogRef,
    isLoginTipsDialogVisible,

    onCaseView,
    onCaseExperience,
    GetDetail,
    getRecommendCase,
} = useContent();
const router = useRouter();

const onLoginClose = () => {
    isLoginTipsDialogVisible.value = false;
}

await GetDetail();

onMounted(() => {
    getRecommendCase(8);
});

useSeoMeta({
    title: detail.value.name + "-北京华锐云空间",
});
</script>
<style>
.login-tips-dialog {
    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 20px !important;
        text-align: center !important;
    }
}

.mask__blur {
    backdrop-filter: blur(10px);
}
</style>
<style lang="scss" scoped>
.case-detail {
    width: 100%;
    background-color: #f4f8fb;
    padding-bottom: 79px;

    .bg {
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/bg.jpg");
        width: 100%;
        height: 400px;
        // background-size: 100% 100%;
        background-position: center center;
    }

    .breadcrumb-list {
        width: 1200px;
        padding: 20px 0;
        margin: 0 auto;

        .breadcrumb-item {
            display: flex;
            align-items: center;
            font-size: 16px;
            line-height: 1;
            user-select: none;

            .back {
                color: #5085fb;
                cursor: default;
            }

            a {
                color: #5085fb;
                text-decoration: none;
            }

            .el-icon {
                margin: 0 5px;
                margin-top: 1px;
            }
        }
    }

    .recommend-title {
        width: 1200px;
        margin: 20px auto;
        font-size: 22px;
        color: #323741;
        font-weight: 600;
    }

    .recommend-list {
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
    }
}
</style>
